<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<th:block th:include="oly/cms/article/article_edit_include :: editHead" />
</head>


<body class="white-bg" >
	<h1 style="display: inline-block;padding-left: 10px;">文章修改</h1>
	<th:block th:include="oly/cms/article/article_edit_include :: editForm(edit='tin',article=${article})" />
	<th:block th:include="oly/cms/article/article_edit_include :: editFooter(articleSummary=${article.articleSummary})" />
	<th:block th:include="include :: oly_tinymce" />
	<th:block th:include="oly/cms/article/article_edit_include :: editCommonJs" />
	<script type="text/javascript" th:inline="JavaScript">
		
		tinymce.init({
			selector: 'div#editor',
			language: 'zh-Hans',
			height: 800,
			plugins: 'preview powerpaste casechange importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media   codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount a11ychecker editimage help formatpainter permanentpen pageembed charmap mentions quickbars  emoticons advtable export',
			toolbar: 'undo redo tableofcontents | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed  link anchor codesample | a11ycheck ltr rtl |',
			images_file_types: 'jpg, jpeg, gif,png,bmp,webp',
			content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
			tableofcontents_class: 'markdown-toc',
			images_upload_url: ctx + "oly/oss/upload/code/location/msg",
			images_upload_credentials: true
		});
    
		$("#editOk").click(function () {
			if ($("input[name='cats']").val() === '') {
				layer.msg('请选择一个分类', { icon: 6 })
			}
			else if ($.validate.form("form-article-edit")) {
				//获取编辑内容
				const editorData = tinyMCE.activeEditor.getContent();
				layer.open({
					title: "确认信息",
					area: ['600px', '600px'],
					type: 1,
					content: $("#editTemplate").html(),
					success: function () {
						$.imageUpload.init(imgConfig);
						//填充图片
						var imgs = chooseImg(editorData);
						if (imgs.length > 0) {
							$.each(imgs, function (i, val) {
								let ii=readyChooseImg.indexOf(val);
								if (ii== -1) {
									$("#chooseImgBox").append("<img class='ophide' src='" + val + "' />");
								}
								else{
									$("#chooseImgBox").append("<img class='opshow' src='" + val + "' />");
								}
							})
						}
						if(readyChooseImg.length>0){
							$.each(readyChooseImg, function (i, val) {
								let ii=imgs.indexOf(val);
								if (ii== -1) {
									$("#chooseImgBox").append("<img class='opshow' src='" + val + "' />");
								}
							})
						}
							//初始化选择事件
							$("#chooseImgBox").on('click','img',function(){
							if ($(this).hasClass("opshow")) {
								$(this).removeClass("opshow");
								$(this).addClass("ophide");
								return;
							}
							if ($(this).hasClass("ophide") && $(".opshow").length < maxPhoto) {
								$(this).removeClass("ophide");
								$(this).addClass("opshow");
								return;
							} else {
								layer.msg('最多选择' + maxPhoto + '张', {
									icon: 6
								})
							}
						});

						$("#uploadImg").on("imgUploaded", function (e, msg) {
							var rs=msg.data.domain + msg.data.fk;
							imgs.push(rs);
							$("#chooseImgBox").append("<img class='ophide' src='" + rs + "' />")
						});
						
						//初始化提交
						$("#saveArticle").click(function () {
							let data = $('#form-article-edit').serializeArray();
							var imgData= getImgSrc($(".opshow"));
							if (imgData.length> 0) {
								data.push({ "name": "articleImg", "value": imgData.join(",") });
							}
							data.push({ "name": "articleContent", "value": editorData });
							data.push({ "name": "articleBuild", "value": 1 });
							data.push({ "name": "articleSummary", "value": $("#articleSummary").val() });
							console.log(data);
							$.operate.saveTab(prefix + "/edit", data);
							layer.closeAll();
						});
					}
				});
			}
			else {
				layer.msg('表单验证未通过', { icon: 6 });
			}
		});
	</script>
</body>

</html>